<template>
  <!-- 查看医生详情 -->
  <div class="ChaKanDoctor">
    <van-nav-bar
        title="医生详情"
        left-arrow
        @click-left="$router.push('/MyDoctor')"
    />
    <div class="list">
      <!-- 医生个人信息展示--头像等等 -->
      <div class="row1">
        <van-image
            class="doctorImg"
            round
            width="3rem"
            height="3rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div>
          <div style="margin-top: 0.5rem">
            <span>{{ detailDoctor.dname ? detailDoctor.dname : '李小爱' }}</span>
          </div>
          <div style="margin-top: 0.5rem">
            <span>{{ detailDoctor.djob ? detailDoctor.djob : '主治医生' }}</span>
          </div>
        </div>
      </div>
      <div class="row2">
        <div><span>从医经验：{{ detailDoctor.dexperience ? detailDoctor.dexperience : '从业15年' }}</span></div>
      </div>
      <div class="row3">
        <span>所属医院：{{ detailDoctor.hname ? detailDoctor.hname : '成都市癫痫医院' }}</span>
      </div>
    </div>
    <!-- 医生的简介--文本描述 -->
    <div>
      <h3>医生简介</h3>
      <div class="content">南方人对医生的尊称为郎中。郎中本是官名，即帝王侍从官的通称。
        其职责原为护卫、陪从，随时建议，备顾问及差遣。战国始有，秦汉治置。后世遂以侍郎、郎中、员外郎为各部要职。
        郎中作为医生的称呼始自宋代。尊称医生为郎中是南方方言，由唐末五代后官衔泛滥所致。
      </div>
    </div>
    <!-- 诊疗活动展示---视频展示 -->
    <div class="footer">
      <h3>诊疗活动</h3>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerImgList" :key="item.id" class="bannerList"><img :src="item.src" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: "ChaKanDoctor",
  mounted() {
    console.log(this.$route);
  },
  computed: {
    ...mapGetters(['bannerImgList'])
  },
  data() {
    return {
      detailDoctor: this.$route.query.item
    }
  },
  methods: {},
};
</script>

<style scope lang="less">
.ChaKanDoctor {
  background-color: white;
}

//轮播图
.bannerList {
  width: 100%;
  height: 200px;

  img {
    width: 100%;
    height: 200px;
  }
}

.list {
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  font-size: 14px;

  span {
    margin-right: 10px;
  }

  .row1 {
    display: flex;

    .span {
      padding: 0.5rem;
    }

    .doctorImg {
      margin-right: 0.5rem;

      div > div {
        margin-bottom: 0.5rem;
      }
    }
  }

  .row2,
  .row3 {
    margin-top: 0.5rem;
  }
}

.content {
  padding: 0 1rem;
  line-height: 1.5rem;
  font-size: 14px;
}

h3 {
  margin-left: 0.5rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
